<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="页面设置"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="专题名称" prop="name">
        <el-input v-model.trim="form.name" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="页面宽度" prop="width">
            <el-input-number v-model.number="form.width" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="页面高度" prop="height">
            <el-input-number v-model.number="form.height" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="背景图片" prop="background">
        <img-upload
          :path="imgPath"
          :base-api="baseApi"
          :src="form.background ? baseUrl + form.background : ''"
          @update="handleUpdate"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import ImgUpload from '@/components/ImgUpload'
  import mixin from '@/views/editor/mixin.js'

  export default {
    name: 'PageEdit',
    components: {
      ImgUpload,
    },
    mixins: [mixin],
    data() {
      return {
        root: {},
        form: {
          name: '',
          background: false,
          width: 0,
          height: 0,
        },
        rules: {
          name: [
            { required: true, trigger: 'blur', message: '请输入专题名称' },
          ],
        },
        dialogFormVisible: false,
      }
    },
    computed: {
      baseApi() {
        return this.root.baseApi
      },
      baseUrl() {
        return this.root.baseUrl
      },
      imgPath() {
        return `topic/${this.root.topicKey}`
      },
    },
    created() {},
    methods: {
      handleUpdate(url) {
        console.log(url)
        this.form.background = url
      },
      showEdit() {
        const page = {
          name: this.root.topic.name,
          background: this.root.data.background || '',
          width: this.root.data.width || 1280,
          height: this.root.data.height || 720,
        }
        this.form = Object.assign({}, page)
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.root.topic.name = this.form.name
            delete this.form.name
            this.root.data = Object.assign({}, this.root.data, this.form)
            this.root.setCache()
            this.$baseMessage('页面设置成功', 'success')
            this.close()
          }
        })
      },
    },
  }
</script>
